<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>++++++++++</title>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.create('Ext.container.Viewport', {
	    layout: 'border',
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Page Title</h1>',
	        border: false,
	        margins: '0 0 5 0'
	    }, {
	        region: 'west',
	        id:"west-panel",
	        collapsible: true,
            animCollapse: true,
	        title: '',
	        width: 150,
	        minWidth:100,
	        maxWidth:200,
	        layout: 'accordion'
	    }, {
	        region: 'south',
			style:{
				textAlign:'center',
				fontWeight: "bold"
			},
			border:false,
// 	        collapsible: true,
	        html: 'Copyright 2013 by XXX',
// 	        split: true,
	    }, 
// 	    {
// 	        region: 'east',
// 	        title: 'East Panel',
// 	        collapsible: true,
// 	        split: true,
// 	        width: 150
// 	    }, 
	    {
	    	id:'center-panel',
	        region: 'center',
	        xtype: 'tabpanel'
// 	        activeTab: 0,
// 	        items: {
// 	            title: 'Default Tab',
// 	            html: 'The first tab\'s content. Others may be added dynamically',
// 	            closable:true
// 	        }
// 			html:'adsfafsd'
	    }]
	});
	Ext.Ajax.request({
	    url: 'Admin!initMenu',
	    success: function(response){
	        var text = response.responseText;
	        var json = Ext.JSON.decode(text);
// 	        alert(json.admin.userResource[0].name);
	        for(var i=0;i<json.admin.userResource.length;i++){
	        	var menuPanel = Ext.create("Ext.Panel",{
	        		title:json.admin.userResource[i].name,
	        		id:"menu_:"+json.admin.userResource[i].id
	        	})
	        	Ext.getCmp("west-panel").add(menuPanel);
	        	initMenu(menuPanel,json.admin.userResource[i]);
	        }
	    }
	});
});

function initNode(resource,array){
	Ext.Array.each(resource.resources,function(){
		var treeNode;
		var nodeArray = null;
		if(this.resources!=null&&this.resources.length>0){
			nodeArray = new Array();
			 treeNode = {
					id:'node_'+this.id,
					text:this.name,
					path:this.path,
					children:nodeArray
					
			}
		}else{
			 treeNode = {
						id:'node_'+this.id,
						text:this.name,
						path:this.path,
						leaf: true
				}
		}
		initNode(this,nodeArray);
		array.push(treeNode);		
	});
}
function initRoot(arg1,arg2,resource){
	var node = {
		id:resource.id,
		text:resource.name,
		path:resource.path,
		expanded: true,
		children:arg2
	}
	arg1.push(node);
}
function initNodes(resource,array){
	Ext.Array.each(resource.resources,function(){
		var treeNode;
		var nodeArray = null;
		if(this.resources!=null&&this.resources.length>0){
			nodeArray = new Array();
			 treeNode = {
					id:this.id,
					text:this.name,
					path:this.path,
					expanded: true,
					children:nodeArray
					
			}
		}else{
			 treeNode = {
					id:this.id,
					text:this.name,
					path:this.path,
					leaf: true
				}
		}
		initNodes(this,nodeArray);
		array.push(treeNode);
	});
}
function initMenu(menuPanel,resource){
	var store = Ext.create('Ext.data.TreeStore', {
	    root: {
	    	id:'root_'+resource.id,
	        expanded: true,
	        text:resource.name
	    },
	    fields:['id','text','path']
	});
	var rootNode = store.getRootNode();
	var childNode = new Array();
	initNode(resource,childNode);
	rootNode.appendChild(childNode);
// 	store.sort('id', 'ASC');
	var tree = Ext.create('Ext.tree.Panel', {
	    store: store,
	    border:false,
	    rootVisible: false,
	    listeners : {
			'itemclick' : function(view,record,item,index,event,object){
				var tab = Ext.getCmp('tab_'+record.data.id);
				var tabs = Ext.getCmp('center-panel');
				if(tab==null&&record.data.path!=''){
					tab = tabs.add({
						id:'tab_'+record.data.id,
						title: record.data.text,
// 						html:record.data.text,
			            closable:true
					});
					var rootStore = Ext.create('Ext.data.TreeStore', {
					    root: {
					        expanded: true,
					        text:null,
					        id:null,
					        path:null
					    },
					    fields:['id','text','path']
					});
					var rootTree = rootStore.getRootNode();
					var rootArray = new Array();
					Ext.Ajax.request({
					    url: 'Resource!menuList',
					    success: function(response){
					        var text = response.responseText;
					        var json = Ext.JSON.decode(text);
					        for(var i=0;i<json.length;i++){
// 					        	alert(json[i].name);
					        	var arr = new Array();
					        	initNodes(json[i],arr);
					        	initRoot(rootArray,arr,json[i]);
// 					        	alert(Ext.JSON.encode(array));
					        	
					        }
					        rootTree.appendChild(rootArray);
					    }
					});
// 					alert(Ext.JSON.encode(rootArray));
					
					var tree = Ext.create('Ext.tree.Panel', {
				        title: '',
				        width: '100%',
				        height: '100%',
				        collapsible: true,
				        useArrows: true,
				        rootVisible: false,
				        store: rootStore,
				        multiSelect: true,
				        singleExpand: false,
				        border:false,
				        tbar:[{
				        	xtype: 'button',
				        	text:'创建顶级菜单',
				        	border:true,
// 				        	floating:true,
				        	handler:function(){
				        		var window = Ext.create('Ext.window.Window', {
				        		    title: '创建菜单',
				        		    layout:'form',
				        		    width: 300,
				        		    height:500,
				        		    plain:true,
				        		    closable:true,
				        		    draggable:false,
				        		    resizable:false,
				        		    modal:true,
				        		    frame:true,
				        		    items: [{
				        		        xtype: 'textfield',
				        		        fieldLabel:"名称",
				        		        id:'name',
				        		        labelAlign:'right',
				        		        emptyText:'输入菜单名',
				        		        enableKeyEvents: true, 
				        		        listeners:{
				        		        	"keypress":function(event){
				        		        		if(Ext.EventObject.getKey()==13){
				        		        			Ext.getCmp("path").focus();
				        		        		}
				        		        	}
				        		        }
				        		    }, {
				        		        xtype: 'textfield',
				        		        fieldLabel:"请求路径",
				        		        labelAlign:'right',
				        		        id:'path',
				        		        emptyText:'输入请求路径',
				        		        margin:'0 0 3 0',
				        		        enableKeyEvents: true, 
				        		        listeners:{
				        		        	"keypress":function(event){
				        		        		if(Ext.EventObject.getKey()==13){
				        		        			Ext.getCmp("addResource").fireEvent("click");
				        		        		}
				        		        	}
				        		        }
				        		    }],buttons:[{
				        		    	text:'创建',
				        		    	id:'addResource',
				        		    	listeners:{
				        		    		"click":function(){
				        		    			alert('Add Resource');
				        		    		}
				        		    	}
				        		    },{
				        		    	text:'取消',
				        		    	listeners:{
				        		    		"click":function(){
				        		    			window.close();
				        		    		}
				        		    	}
				        		    }]
				        		});
				        		window.center();
				        		window.show();
				        	}
				        }],
				        columns: [{
				            xtype: 'treecolumn',
				            text: '菜单名',
				            flex: 1,
				            sortable: true,
				            align: 'left',
				            dataIndex: 'text'
				        },{
				        	xtype: 'treecolumn',
				            text: '请求路径',
				            flex: 2,
				            sortable: true,
				            align: 'left',
				            dataIndex: 'path'
				        },{
				        	xtype:'actioncolumn',
				        	align:'center',
				        	sortable: false,
				            width:100,
				            items: [{
				                icon: 'img/add.png',
				                tooltip: '添加子菜单',
// 								text:'添加子菜单',
				                handler: function(grid, rowIndex, colIndex) {
				                    var rec = grid.getStore().getAt(rowIndex);
				                    alert(rec.get('id')+":"+rec.get('text')+":"+rec.get('path'));
				                }
				            },{
				            	icon: 'img/delete.png',
				                tooltip: '删除',
				            },{
				            	icon: 'img/edit.png',
				                tooltip: '修改',
				            },{
				            	icon: 'img/find.png',
				                tooltip: '查看',
				            }]
				        }]
				    });
					tab.add(tree);
// 					tree.center();
					tabs.setActiveTab(tab);
				}else{
					tabs.setActiveTab(tab);
				}
			}
	    }
	});
	menuPanel.add(tree);
}
</script>
</head>
<body>
</body>
</html>